// less混合mixin（宏）
// 定义混合：./# + 混合名 + () + {样式集合}
// 使用混合：./# + 混合名 + ();

.mixin1{// 定义混合，可以没有小括号，会被编译到css中
    width: 400px;
    height: 100px;
    margin-bottom: 15px;
}
.box1{
    .mixin1;// 使用混合，可以没有小括号
    background-color: lightblue;
}

.mixin2(){// 定义混合，可以有小括号，不会被编译到css中
    width: 400px;
    height: 100px;
    margin-bottom: 15px;
}
.box2{
    .mixin2();// 使用混合，可以有小括号
    background-color: lightgreen;
}

.mixin3(@w,@h){// 定义混合，有参数，不会被编译到css中
    width: @w;
    height: @h;
    margin-bottom: 15px;
}
.box3{
    .mixin3(500px,150px);// 使用混合，传递参数
    background-color: lightpink;
}

// 混合的命名参数
.mixin4(@w:400px,@h:100px,@c:pink){
    // @w:400px -> 形参@w默认值为400px
    width: @w;
    height: @h;
    color: @c;
    margin-bottom: 15px;
}
.box4{
    // .mixin4();
    .mixin4(@c:red,@h:50px);
    background-color: lightgoldenrodyellow;
}

// 混合的@arguments参数
// @arguments 用于在混合中一次性接收所有参数
.mixin5(@x,@y,@blur,@color){
    width: 400px;
    height: 100px;
    background-color: #666;
    // box-shadow: @x @y @blur @color;
    box-shadow: @arguments;
}
.box5{
    .mixin5(5px,5px,8px,blue);
}